<template>
  <div class="search-header">
    <div style="font-size: 20px;color: #d0e2ff;margin-bottom: 10px">政策超市</div>
    <div>
      <el-input
          style="width: 980px"
          size="large"
          v-model="search"
          clearable
      >
        <template #prepend>
          <el-select v-model="select" size="large" style="width: 120px;">
            <el-option v-for="(item,index) in ['全文','标题','文号']" :label="item" :value="index"/>
          </el-select>
        </template>
        <template #append>
          <el-button size="large" style="width: 100px;" :icon="Search"/>
        </template>
      </el-input>
    </div>
    <div class="search-tips">
      <span v-for="item in tips" @click="search = item">{{ item }}</span>
    </div>
  </div>
  <div class="app-container">
    <el-card shadow="never">
      <ul class="policy-list">
        <li v-for="(item) in policyList">{{ item.title }}：
          <el-tag
              style="margin-right: 20px;cursor: pointer"
              v-for="(item2,index2) in item.child"
              :key="item2"
              :effect="item.checked[index2] ? 'dark' : 'plain'"
              round
              @click="item.checked[index2] = !item.checked[index2]"
          >
            {{ item2 }}
          </el-tag>
        </li>
        <li style="display: flex;align-items:center">
          <div> 发布地区：</div>
          <el-row :gutter="20" style="width: 600px">
            <el-col :span="8">
              <el-select v-model="form.province">
                <el-option
                    v-for="(item,index) in ['广西']"
                    :key="index"
                    :label="item"
                    :value="index"
                />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select v-model="form.city">
                <el-option
                    v-for="(item,index) in ['梧州市']"
                    :key="index"
                    :label="item"
                    :value="index"
                />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-select v-model="form.area">
                <el-option
                    v-for="(item,index) in ['万秀区','长洲区','龙圩区','苍梧县','藤县','蒙山县','岑溪市']"
                    :key="index"
                    :label="item"
                    :value="index"
                />
              </el-select>
            </el-col>
          </el-row>
        </li>
        <li>
          筛选条件：
          <template v-for="(tag,index) in policyList">
            <el-tag class="tag-item" size="large" v-if="tag.checked.includes(true)" closable
                    @close="tag.checked.fill(false);">
              {{ tag.title }}：
              <template v-for="(val,key) in tag.child">
                <span v-if="tag.checked[key]"> {{ val }}</span>
              </template>
            </el-tag>
          </template>
        </li>
      </ul>
    </el-card>
    <br>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <div>已为您推荐 <span style="color: red">70</span> 条相关政策</div>
          <el-button type="primary" icon="Sort" round> 按发布日期正序</el-button>
        </div>
      </template>
      <ul class="card-list">
        <li v-for="item in policyBasicPageData" :key="item.id">
          <div><strong style="margin-right: 10px">{{ item.policyTitle }}</strong>
            <el-tag style="margin-right: 10px" v-for="item2 in item.policyDirection">{{ item2.tagName }}</el-tag>
            <el-tag style="margin-right: 10px" type="warning" v-for="item3 in item.fieldIndustry">{{ item3.tagName }}</el-tag>
          </div>
          <div>
            <small>政策文号：{{item.fileCode}}</small>
            <small>发文单位：{{item.policyDepartment}}</small>
            <small>发布日期：{{ item.pubDate}}</small>
          </div>
        </li>
      </ul>
      <template #footer>
       <div style="display: flex;justify-content: right;">
         <el-pagination background layout="prev, pager, next" :total="1000" />
       </div>
      </template>


    </el-card>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import {policyBasicPageData, policyData} from '../data/data.js'

const search = ref()
const select = ref(0)
const tips = reactive([
  "汽车零部件",
  "生命（医疗）健康",
  "关键基础件（气动）",
  "电子信息",
  "新材料",
  "新能源（节能环保）",
  "智能家电",
  "时尚服装",
])


const policyList = reactive(policyData)
const form = reactive({
  province: 0,
  city: 0,
  area: 0
})


</script>


<style scoped lang="scss">
.search-header {
  height: 180px;
  background-image: url("@/assets/images/search_header.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #0b63b7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .search-tips {
    margin-top: 10px;
    color: #ffffff;

    span {
      cursor: pointer;
      margin: 0 10px;
    }
  }
}

.policy-list {
  > li {
    color: #666666;
    padding: 15px;
    border-bottom: 1px #ececed dashed;
  }

  > li:last-child {
    border: none;
  }
}

.tag-item {
  margin-right: 20px;

  span {
    padding: 0 10px;
    text-align: center;
    border-right: 1px solid #409eff;
  }

  span:last-child {
    border: none;
  }
}

.el-card ::v-deep .el-card__header {
  background-color: #f5f9ff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-list {
  > li {
    padding: 20px 0;
    border-bottom: 1px #ececed dashed;

    > div {
      margin-bottom: 12x;
      small{
        font-size: 14px;
        color: #999999;
      }
    }

    > div:last-child {
      margin-bottom: 0;
    }
  }

  > li:last-child {
    border: none;
  }
}
</style>
<!--search_header.png-->
